<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
        * {
            margin: 0;
            padding: 0
        }
        
        ul {
            list-style: none
        }
        
        .box {
            width: 600px;
            margin: 100px auto;
            border: 1px solid #000;
            padding: 20px;
        }
        
        textarea {
            width: 450px;
            height: 160px;
            outline: none;
            resize: none;
        }
        
        ul {
            width: 450px;
            padding-left: 80px;
        }
        
        ul li {
            line-height: 25px;
            border-bottom: 1px dashed #cccccc;
            
        }
        
        input {
            float: right;
        }
        
        ul li a {
            float: right;
        }
        
        .borderSty {
        	border: 1px solid red;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
    	$(function() {
    		//点击发布按钮输入
    		$('.btn').on('click',function(){
    			//获取文本框的值
    			var txt_value = $('.txt').val()
    			//判断是否有文本内容
    			if (txt_value.length > 0) {
    				//添加li标签
    				$('ul').append('<li></li>')
    				//添加内容与删除a标签
	    			$('li:last').append(txt_value+'<a href="#">删除</a>')
	    			//清空文本内容
	    			$('.txt').val('')
    			}
    		})
    		
    		//回车输入
    		$('.txt').on('keyup',function(key){
    			//获取文本框的值
    			var txt_value = $('.txt').val()
    			//正则换行符
    			re = /^\s*?\n/
    			//按下回车继续
    			if (key.keyCode == 13) {
    				//判断是否有文本内容
    				if (re.test(txt_value)) {
						//更改边框颜色为红色
	    				$(this).css('border','1px solid red')
	    				//清空文本内容
	    				$('.txt').val('')
    				} else{
    					//添加li标签
    					$('ul').append('<li></li>')
    					//添加内容与删除a标签
		    			$('li:last').append(txt_value+'<a href="#">删除</a>')
		    			//更改边框颜色为黑色
		    			$(this).css('border','1px solid black')
		    			//清空文本内容
		    			$('.txt').val('')
	    			}
    			}	
    		})
			//点击删除
			$('ul').on('click','a',function(){
		    	$(this).parent('li').remove()
		    })
    	})
    </script>
	</head>
	<body>
		<div class="box" id="weibo">
        <span>微博发布</span>
        <textarea name="" class="txt" cols="30" rows="10"></textarea>
        <button class="btn">发布</button>
        <ul>
        </ul>
    </div>
	</body>
</html>
